"use client"//客户端组件
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input, Card } from 'antd';
import '@/app/globals.css'
import {useRouter} from "next/navigation"
export default function Login() {

  const router = useRouter()
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
    // 模拟登录
    localStorage.setItem('token',values.username)
    // 跳转
    router.push('/')
   
  };

  return (
    <div className='box'>
      <Card title="客户关系管理系统"
        style={{
          width: 500,
          margin: "0 auto",
          position: 'absolute',
          top: '30%',
          left: '35%',
        }}>
        <Form
          name="login"
          initialValues={{ remember: true }}
          style={{ maxWidth: 360 }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入账号' }]}
          >
            <Input prefix={<UserOutlined />} placeholder="账号" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input prefix={<LockOutlined />} type="password" placeholder="密码" />
          </Form.Item>
          <Form.Item>
            <Button block type="primary" htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
}
